// 作用：用于包裹两个功能表单

import React, { Component } from 'react';
import { Card, Tabs } from 'antd';
import styled from 'styled-components';
import MobileLogin from "./mobileLogin"
import PasswordLogin from "./passwordLogin"
import loginImg from "../../assets/loginImg.jpg"


class Index extends Component {
  constructor(props) {
    super(props)
    let jwt = sessionStorage.getItem("jwt")
    if (jwt) {
      this.props.history.push("/dashboard")
    }
  }
  render() {
    const { TabPane } = Tabs;
    return (
      <Containder>
        <LoginForm>
          <Card style={{ borderRadius: "15px" }}>
            <Tabs defaultActiveKey="1" centered>
              <TabPane tab="密码登录" key="1">
                <PasswordLogin></PasswordLogin>
              </TabPane>
              <TabPane tab="短信登录" key="2">
                <MobileLogin></MobileLogin>
              </TabPane>
            </Tabs>
          </Card>
        </LoginForm>
      </Containder>
    );
  }
}
// 大容器盒子
const Containder = styled.div`
  padding-top: 15%;
  width: 100%;
  height: 100%;
  background: url(${loginImg});
  background-size: 100% 100%;
`
// 登录表单盒子
const LoginForm = styled.div`
  width: 400px;
  margin: 0 auto;
`

export default Index;
